iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 12
0
Modern Web

JavaScript 從零開始系列 第 12

JavaScript 從零開始 - Day12- function 函式 Hoisting 提升觀念

  • 分享至 

  • xImage
  •  

JavaScript Note

瀏覽器在讀取程式碼基本上都是從上到下讀取,在變數的寫法,會是這樣的結果。

console.log(a); //undefind
var a = 1;
console.log(a); //1

上方變數的撰寫跟讀取的結果,會是由上到下讀取,所以在第一行 console.log 因為找不到變數所以結果會是 undefind,第三個 console.log 因為有讀到第二行的變數,所以找到了 a 的值為1。

那 function 呢?

加入一個 function,先看程式碼:

console.log(a); //undefind
var a = 1;
console.log(a); //1

count();//會得到什麼?

function count(){
 console.log('hello!'); 
}

count 結果會是:

count();// hello!

function count(){
 console.log('hello!'); 
}

function 有一個 Hoisting 的向上提升的概念,就是瀏覽器會先把 function 設定為優先讀取,在瀏覽器的讀取順序會變成這樣:

function count(){
 console.log('hello!'); 
}

count();// hello!

故在執行 function 的時候,function 名稱寫在上面或下面是沒有差的,但為了讓自己習慣所有程式碼都遵循由上到下讀取的方式,我還是會寫成剛上方一樣的方式,維持一個習慣寫法,也比較不會讓自己搞混!

補充

Hositing 就是將變數&函數提升到所有程式碼最前面,然後先存進記憶體中,後面在做賦值等動作。由此可知 Hositing 主要跟記憶體有關係,而 Hositing 只是一個觀念。


文章參考:

https://hsiangfeng.github.io/javascript/20190419/3635730318/

https://developer.mozilla.org/zh-TW/docs/Glossary/Hoisting


上一篇
JavaScript 從零開始 - Day11- 函式 function 搭配 return
下一篇
JavaScript 從零開始 - Day13 - 利用函式 function 寫一個計算題
系列文
JavaScript 從零開始40
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言